<template>
  <Modal v-model="modal" :title="title">
    <Tabs :value="0">
        <TabPane v-for="(item, index) of listData" :key="index" ::key="index" :label="item.name" :name="index">    
          <div class="has-choice">
            <ul v-if="item.child && item.child.length">
              <li v-for="(todo, index) of item.child" :key="index">
                <div class="left">
                  <div class="name">{{todo.version_num}}({{todo.type}})</div>
                  <div class="info">{{todo.address}}</div>
                </div>
                <div class="right">
                  <Button v-if="todo.status == 1" type="text" shape="circle">已分配</Button>
                  <Button v-else type="primary" shape="circle" @click="onJoinCompany(todo)">分配</Button>
                </div>
              </li>
            </ul>
            <div v-else>暂无数据</div>
          </div>
        </TabPane>
    </Tabs>
    <div slot="footer" align="right">
      <Button type="default" @click="cancel">关闭</Button>
    </div>
    <JoinCompanyitem ref="join" @complete="getData" ></JoinCompanyitem>
    <Loader :status="status" @refresh="getData"></Loader>
  </Modal>
</template>
<script >
import JoinCompanyitem from './JoinCompanyitem'
export default {
    components: {
      JoinCompanyitem
    },
    data(){
      return {
        title: '表单版本列表',
        modal: false,
        listData: null,
        status: 'pass',
        order_id: '',
        list: {
          0: "个人",
          1: "设计师",
          2: "制版师",
          3: "制样师"
        }
      }
    },
    created() {
    },
    methods:{
      getData() {
        this.status = 'loading'
        this.$ajaxGet('/store/distributionList', {store_order_id: this.order_id}).then(res => {
          this.status = 'pass'
          this.listData = res.map(item =>  {
            return {
              name: item.name,
              child: item.child.map(todo => {
                return {
                  version_num: todo.version_num,
                  type: this.list[todo.type],
                  value: todo.type,
                  status: todo.status,
                  version_id: todo.version_id
                }
              })
            }
          })
        })
      },
      open (item) {
        this.modal = true
        this.order_id = item.store_order_id
        this.getData()
      },
      cancel () {
        this.modal = false
      },
      onJoinCompany (item) {
        // this.$refs.join.updataForm(item.id)
      this.$Modal.confirm({
        title: '提示',
        content: '确定要分配吗吗？',
        onOk: () => {
          let data = {
            store_order_id: this.order_id,
            version_id: item.version_id,
            type: item.value
          }
          this.status = 'loading'
          this.$jsonPost('/store/distributionField', data).then(() => {
             this.status = 'pass'
            this.$Notice.success({
              title: '分配成功',
              desc: `<span class='font-red'>${item.version_num}</span> 已分配。`
            })
            this.getData()
          }).catch(res => {
            this.status = 'pass'
          })
        }
        })
      }
    }
}
</script>
<style scoped>
.tag-modal{
    text-align: center;
}
</style>
